<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角边框</title>
        <style type="text/css">
            .wrapper {
                width: 600px ; /* 设置元素宽度 */
                height: 400px ; /* 设置元素高度 */
                margin: 50px auto ; /* 设置元素外边距 ( 先上下 后左右 )*/
                border: 10px solid #0000FF ; /* 顶部边框 */
            }

            .first { border-radius: 50px 100px 150px 200px / 50px 100px 150px 200px ; }
            .second { border-radius: 50px 100px 150px 200px / 50px 100px 150px ; }
            .third { border-radius: 50px 100px 150px 200px / 50px 100px ; }
            .fourth { border-radius: 50px 100px 150px 200px / 50px 50px 50px 50px ; }
        </style>
    </head>
    <body>
        <div class="wrapper first"></div>
        <div class="wrapper second"></div>
        <div class="wrapper third"></div>
        <div class="wrapper fourth"></div>
    </body>
</html>